<template>
  <!-- search
  {{config}} -->
  <el-form :inline="true" :model="searchData" class="demo-form-inline">
    <el-form-item v-for="item in config.items" :label="item.label">
      <!-- 文本框 -->
      <el-input v-if="item.showType==='text'" v-model="searchData[item.apiField]" :placeholder="item.label"></el-input>
      <!-- 下拉菜单 --> <!-- 多选 -->
      <el-select v-if="item.showType==='dropdown'" :multiple="item.multiple" v-model="searchData[item.apiField]" :placeholder="item.label">
        <el-option
          v-for="opt in dropdownOptions[item.name]"
          :key="opt[item.optionKey]"
          :label="opt[item.optionLabel]"
          :value="opt[item.optionKey]"
        >
        </el-option>
      </el-select>      
      <!-- 日期范围 需要提供更多控制属性-->
      <el-date-picker v-if="item.showType==='daterange'"
        v-model="searchData[item.apiField]"
        type="daterange"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
      >
      </el-date-picker>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from 'axios'
export default {
  props:{
    config:Object
  },
  methods: {
    onSubmit() {
      console.log(this.searchData);
    },
  },
  created(){
    this.config.items.forEach(item => {
      //设置下拉框选项
      if(item.showType==='dropdown'){
        let opt=item.options        
        if(item.opttype==='dynamic'){
          //如果是动态选项，就调接口
          axios.get(opt).then(rep=>{
            // console.log(rep.data)
            this.dropdownOptions[item.name]=rep.data.data
          })
        }
        else{
          //如果是静态选项，就parse成json数组
          // console.log(opt);
          this.dropdownOptions[item.name]=JSON.parse(opt)
        }
      }
    });
  },  
  data(){
    return {
      searchData:{},  
      dropdownOptions:{}    
    }
  }
}
</script>

<style>

</style>